import { Meta, StoryObj } from '@storybook/vue3-vite';
import { NInput } from 'naive-ui';

const meta = {
    title: 'Navie UI/NInput',
    component: NInput,
    tags: ['autodocs'],
    render: (args) => ({
        components: { NInput },
        setup() {
            const value = ref(args.value || '');
            return { args, value };
        },
        template: `
            <div style="padding: 1rem;">
                <NInput
                    :value="value"
                    @update:value="value = $event"
                    v-bind="args"
                />
                <p style="margin-top: 1rem;">当前值: {{ value }}</p>
            </div>
        `
    }),
    argTypes: {
        type: {
            description: 'Defines the type of the input, which affects its style.',
            control: 'select',
            options: ['text', 'password', 'textarea'],
        },
        value: {
            description: 'The current value of the input.',
            control: 'text',
        },
        disabled: {
            description: 'Whether the input is disabled.',
            control: 'boolean',
        },
        maxlength: {
            description: 'Maximum number of characters allowed in the input.',
            control: 'number',
        },
        showCount: {
            description: 'Whether to show the character count.',
            control: 'boolean',
        },
        readonly: {
            description: 'Whether the input is read-only. This is different from disabled in that the user can still focus and select text.',
            control: 'boolean',
        },
        clearable: {
            description: 'Whether the input has a clear button to clear its content.',
            control: 'boolean',
        },
        rows: {
            description: 'Number of rows for textarea type input.',
            control: 'number',
        },
        status: {
            description: 'Defines the validation status of the input, which affects its border color.',
            control: 'select',
            options: ['error', 'warning', 'success'],
        },
        size: {
            description: 'Defines the size of the input, which affects its padding and font size.',
            control: 'select',
            options: ['tiny', 'small', 'medium', 'large'],
        },
    },
    args: {
        type: 'text',
        value: undefined,
        disabled: false,
        clearable: false,
        maxlength: 6,
        showCount: false,
        readonly: false,
        rows: 3,
        status: undefined,
        size: 'medium',
    },

} satisfies Meta<typeof NInput>;
export default meta;

type Story = StoryObj<typeof meta>;

export const TextInput: Story = {
    args: {
        type: 'text',
    },
};